<link href="css/smartWizard/smart_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/smartWizard/jquery.smartWizard-2.0.min.js"></script>
<script type="text/javascript" src="js/smartWizard/hacerTransferencia.js"></script>
<script type="text/javascript" src="js/autoNumeric/autoNumeric-1.7.4.js"></script>


<div class="container_16">
    <div class="grid_13 push_1">
        <form id="trans" action="backend/transferencia/hacerTransferencia/setTransferencia" method="post">
            <div id="wizard" class="swMain">
                <ul>
                    <li><a href="#step-1">
                            <label class="stepNumber">1</label>
                            <span class="stepDesc"><?= lang('cuentaOrigen') ?></span>
                        </a></li>
                    <li><a href="#step-2">
                            <label class="stepNumber">2</label>
                            <span class="stepDesc"><?= lang('Datos') ?></span>
                        </a></li>
                    <li><a href="#step-3">
                            <label class="stepNumber">3</label>
                            <span class="stepDesc"><?= lang('cuentaDestino') ?></span>
                        </a></li>
                    <li><a href="#step-4">
                            <label class="stepNumber">4</label>
                            <span class="stepDesc"><?= lang('resumen') ?></span>
                        </a></li>
                </ul>
                <div id="step-1">
                    <h2 class="StepTitle"><?= lang('seleccionaCuentaOrigen') ?></h2>
                    <h5 class="StepDesc"><?= lang('seleccionaCuentaOrigenDesc') ?></h5>

                    <fieldset style="border-color:red;">
                        <legend><font color="red"><?= lang('seleccionaCuentaOrigen') ?></font></legend>
                        <table width="50%">
                            <tr>
                                <td></td>
                                <td style="color:red;"><?= lang('cuenta') ?></td>
                                <td style="color:red;"><?= lang('saldo') ?></td>
                            </tr>
                            <?php foreach ($cuenta as $cadaCuenta): ?>
                                <?php if ($cadaCuenta->saldo > 0) {
                                    ?>
                                    <tr>
                                        <td>
                                            <input type="radio" name="cuenta" class="miCu" id="<?= $cadaCuenta->id ?>"
                                                   value="<?= $cadaCuenta->id ?>#<?= $cadaCuenta->codigoEntidad ?> <?= $cadaCuenta->codigoOficina ?> <?= $cadaCuenta->codigoControl ?> <?= $cadaCuenta->codigoCuenta ?>"
                                                   onclick="seleccionarCuentaOrigen()">
                                        </td>
                                        <td>
                                            <label
                                                for="<?= $cadaCuenta->id ?>"><?= $cadaCuenta->codigoEntidad ?> <?= $cadaCuenta->codigoOficina ?> <?= $cadaCuenta->codigoControl ?> <?= $cadaCuenta->codigoCuenta ?></label>
                                        </td>
                                        <td>
                                            <label style="float: right" id="co<?= $cadaCuenta->id ?>" name="lbSaldo"
                                                   value="<?= $cadaCuenta->saldo ?>"><?= number_format($cadaCuenta->saldo, 2, ",", ".") ?>&euro;</label>
                                        </td>
                                    </tr>
                                <?php } ?>
                            <?php endforeach; ?>
                        </table>
                    </fieldset>
                    <fieldset style="border-color:red; margin-top: 15px;">
                        <legend><font color="red"><?= lang('transferenciasHabituales') ?></font></legend>
                        <table id="tabTransHab" width="100%">
                            <thead>
                                <tr>
                                    <th></th>
                                    <td style="color:red;"><?= lang('cuentaOrigen') ?></td>
                                    <td style="color:red;"><?= lang('saldo') ?></td>
                                    <td style="color:red;"><?= lang('cuentaDestino') ?></td>
                                    <td style="color:red;"><?= lang('nombreBene') ?></td>
                                    <td style="color:red;"><?= lang('concepto') ?></td>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $i = 0; ?>
                                <?php foreach ($transferencias as $transferencia): ?>
                                    <tr>
                                        <td><input type="radio" id="<?= $i ?>transferenciaHabitual" name="transferenciaHabitual"
                                                   value="<?= $transferencia->idCuenta ?>" onclick="seleccionarTransferenciaHabitual()"/></td>
                                        <td><label
                                                for="<?= $i ?>transferenciaHabitual"><?= $transferencia->codigoEntidad . " " . $transferencia->codigoOficina . " " . $transferencia->codigoControl . " " . $transferencia->codigoCuenta ?></label>
                                        </td>
                                        <td style="text-align: right"><label
                                                for="<?= $i ?>transferenciaHabitual"><?= number_format($transferencia->saldo, 2, ",", ".") ?>&euro;</label>
                                        </td>
                                        <td><label
                                                for="<?= $i ?>transferenciaHabitual"><?= substr($transferencia->cuentaDestino, 0, 4) . " " . substr($transferencia->cuentaDestino, 4, 4) . " " . substr($transferencia->cuentaDestino, 8, 2) . " " . substr($transferencia->cuentaDestino, 10, 8) ?></label>
                                        </td>
                                        <td id="<?= $i ?>beneficiario"><label
                                                for="<?= $i ?>transferenciaHabitual"><?= $transferencia->beneficiario ?></label></td>
                                        <td><label for="<?= $i ?>transferenciaHabitual"><?= $transferencia->conceptoAd ?></label></td>
                                    </tr>
                                    <?php $i++; ?>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </fieldset>

                </div>
                <div id="step-2">
                    <h2 class="StepTitle"><?= lang('datosTitulo') ?></h2>
                    <h5 class="StepDesc"><?= lang('datosSubTitulo') ?></h5>
                    <fieldset style="border-color:red;">
                        <legend><font color="red"><?= lang('datosTitulo') ?></font></legend>
                        <table>
                            <tr>
                                <td><?= lang('importe') ?><font color="red">*</font>:</td>
                                <td><input type="text" id="txtImporte" name="txtImporte"></td>
                                <td width="50px"></td>
                                <td><?= lang('porCuentaDe') ?>:</td>
                                <td><input type="text" id="txtPorCuentaDe" name="txtPorCuentaDe"></td>
                            </tr>
                            <tr>
                                <td><?= lang('concepto') ?>:</td>
                                <td><input type="text" id="txtConcepto" name="txtConcepto"></td>
                                <td></td>
                                <td><?= lang('referencia') ?>:</td>
                                <td><input type="text" id="txtReferencia" name="txtReferencia"></td>
                            </tr>
                            <tr>
                                <td><?= lang('concepAdicional') ?>:</td>
                                <td><input type="text" id="txtConceptoAd" name="txtConceptoAd"></td>
                                <td></td>
                                <td><?= lang('nombreBene') ?>:</td>
                                <td><input type="text" id="txtBeneficiario" name="txtBeneficiario"></td>
                            </tr>
                            <tr>
                                <td><?= lang('desc') ?>:</td>
                                <td><input type="text" id="txtDescripcion" name="txtDescripcion"></td>
                            </tr>
                        </table>
                    </fieldset>

                </div>

                <div id="step-3">
                    <h2 class="StepTitle"><?= lang('cuentaDestinoTit') ?></h2>
                    <h5 class="StepDesc"><?= lang('cuentaDestinoSubTit') ?></h5>
                    <fieldset style="border-color:red;">
                        <legend><font color="red"><?= lang('cuentaDestinoTit') ?></font></legend>
                        <table>
                            <tr>
                                <td>
                                    <input type="radio" class="cuDe" name="cuentaDestino" id="miCuenta"
                                           value="Mi cuenta"/><?= lang('miCuenta') ?>
                                </td>
                                <td>
                                    <button id="buscarCuentaDestino" type="button"><?= lang('buscar') ?> </button>
                                </td>
                                <td></td>
                                <td>
                                    <?= lang('cuenta') ?>:
                                </td>
                                <td>
                                    <input style="width:200px" type="text" disabled="disabled" id="uCuenta"
                                           name="uCuenta"/>
                                </td>
                                <td>
                                    <input type="hidden" id="uCuentaId" name="uCuentaId"/>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><?= lang('enditad') ?></td>
                                <td><?= lang('oficina') ?></td>
                                <td><?= lang('control') ?></td>
                                <td><?= lang('cuenta') ?></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="radio" name="cuentaDestino" id="otraCuenta" class="cuDe"
                                           value="Otra Cuenta"/><?= lang('otraCuenta') ?>
                                    <input id="oDestino" name="oDestino" type="hidden">
                                </td>
                                <td>
                            <center><input type="text" id="otraCuentaEntidad" name="otraCuentaEntidad"
                                           style="width:50px"/></center>
                            </td>
                            <td>
                            <center><input type="text" id="otraCuentaOficina" name="otraCuentaOficina"
                                           style="width:50px"/></center>
                            </td>
                            <td>
                            <center><input type="text" id="otraCuentaControl" name="otraCuentaControl"
                                           style="width:25px"/></center>
                            </td>
                            <td>
                                <input type="text" id="otraCuentaCuenta" name="otraCuentaCuenta"
                                       style="width:150px"/>
                            </td>
                            </tr>
                        </table>
                    </fieldset>
                </div>
                <div id="step-4">
                    <h2 class="StepTitle"><?= lang('resumen') ?></h2>
                    <h5 class="StepDesc"><?= lang('resumenSubTit') ?></h5>


                    <fieldset style="border-color:red;">
                        <legend><font color="red"><?= lang('datosTitulo') ?></font></legend>
                        <table>
                            <tr>
                                <td><?= lang('cuentaOrigen') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumenCuentaOrigen"
                                           name="resumenCuentaOrigen"/></td>
                                <td width="50px"></td>
                                <td><?= lang('importe') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumenImporte" name="resumenImporte"/>
                                </td>
                            </tr>
                            <tr>
                                <td><?= lang('cuentaDestinoTit') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumenCuentaDestino"
                                           name="resumenCuentaDestino"/></td>
                            </tr>
                            <tr>
                                <td><?= lang('porCuentaDe') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumenPorCuentaDe"
                                           name="resumenPorCuentaDe"></td>
                                <td></td>
                                <td><?= lang('concepto') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumenConcepto" name="resumenConcepto">
                                </td>
                            </tr>
                            <tr>
                                <td><?= lang('referencia') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumentxtReferencia"
                                           name="resumentxtReferencia"></td>
                                <td></td>
                                <td><?= lang('nombreBene') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumenBeneficiario"
                                           name="resumenBeneficiario"></td>
                            </tr>
                            <tr>
                                <td><?= lang('concepAdicional') ?>:</td>
                                <td><input type="text" disabled="disabled" id="resumentxtConceptoAd"
                                           name="resumentxtConceptoAd"></td>
                            </tr>
                        </table>
                    </fieldset>
                </div>
            </div>
        </form>
    </div>
    <label style="margin-left: 350px;"><?= lang('tipReiniciar') ?>:
        <a href="backend/transferencia/hacerTransferencia">
            <span style="color:red" class="stepDesc"><?= lang('reiniciar') ?></span>
        </a>
    </label>
</div>


<div id="dialogoCuentaDestino" style="display:none">
    <table id="cliente" class="display">
        <thead>
            <tr>
                <th></th>
                <th><?= lang('enditad') ?></th>
                <th><?= lang('oficina') ?></th>
                <th><?= lang('control') ?></th>
                <th><?= lang('cuenta') ?></th>
                <th><?= lang('saldo') ?></th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($cuenta as $cadaCuenta): ?>
                <tr id="cuentaDialogo<?= $cadaCuenta->id ?>">
                    <td><input type="radio" name="seleccionado" value="
                        <?= $cadaCuenta->id . '#' . $cadaCuenta->codigoEntidad . ' ' . $cadaCuenta->codigoOficina . ' ' .
                                $cadaCuenta->codigoControl . ' ' . $cadaCuenta->codigoCuenta
                        ?>"/></td>
                    <td><?= $cadaCuenta->codigoEntidad ?></td>
                    <td><?= $cadaCuenta->codigoOficina ?></td>
                    <td><?= $cadaCuenta->codigoControl ?></td>
                    <td><?= $cadaCuenta->codigoCuenta ?></td>
                    <td><?= number_format($cadaCuenta->saldo, 2, ",", ".") ?>&euro;</td>
                </tr>
<?php endforeach; ?>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    function seleccionarCuentaOrigen() {
        /*Desmarcar opciones de transferencias habituales*/
        if (trans.transferenciasHabituales instanceof HTMLInputElement) {
            trans.transferenciasHabituales.checked = false;
        }
        else {
            for (var i = 0; i < trans.transferenciaHabitual.length; i++) {
                trans.transferenciaHabitual[i].checked = false;
            }
        }
        /*Quitar cuenta seleccionada de possibles cuentas destino*/
        if (trans.cuenta instanceof HTMLInputElement) {
            var idCuenta = trans.cuenta.id;
            $("#cuentaDialogo" + idCuenta).attr("style", "display:none");
        }
        else {
            for (var i = 0; i < trans.cuenta.length; i++) {
                if (trans.cuenta[i].checked) {
                    var idCuenta = trans.cuenta[i].id;
                    $("#cuentaDialogo" + idCuenta).attr("style", "display:none");
                }
                else {
                    var idCuenta = trans.cuenta[i].id;
                    $("#cuentaDialogo" + idCuenta).attr("style", "");
                }
            }
        }
    }
    ;

    function seleccionarTransferenciaHabitual() {
        /*Desmarcar opciones de cuentas propias*/
        if (trans.cuenta instanceof HTMLInputElement) {
            trans.cuenta.checked = false;
        }
        else {
            for (var i = 0; i < trans.cuenta.length; i++) {
                trans.cuenta[i].checked = false;
            }
        }
        /*Quitar cuenta seleccionada de possibles cuentas destino*/
        var row;
        if (trans.transferenciaHabitual instanceof HTMLInputElement) {
            var idCuenta = trans.transferenciaHabitual.value;
            $("#cuentaDialogo" + idCuenta).attr("style", "display:none");
            row = trans.transferenciaHabitual.id.substring(0, 1);
            uCuentaId.value = trans.transferenciaHabitual.value;
        }
        else {
            var idCuenta = "";
            for (var i = 0; i < trans.transferenciaHabitual.length; i++) {
                if (trans.transferenciaHabitual[i].checked) {
                    idCuenta = trans.transferenciaHabitual[i].value;
                    $("#cuentaDialogo" + idCuenta).attr("style", "display:none");
                    row = trans.transferenciaHabitual[i].id.substring(0, 1);
                    uCuentaId.value = trans.transferenciaHabitual[i].value;
                }
                else {
                    if (trans.transferenciaHabitual[i].value != idCuenta) {
                        idCuenta = trans.transferenciaHabitual[i].value;
                        $("#cuentaDialogo" + idCuenta).attr("style", "");
                    }
                }
            }
        }
        /*Rellenar campos con la informacion*/
        txtBeneficiario.value = $("#tabTransHab tbody").children(':eq(' + row + ')').children(':eq(4)').text();
        txtConceptoAd.value = $("#tabTransHab tbody").children(':eq(' + row + ')').children(':eq(5)').text();
        otraCuenta.checked = true;
        otraCuentaEntidad.value = $("#tabTransHab tbody").children(':eq(' + row + ')').children(':eq(3)').text().substring(0, 4);
        otraCuentaOficina.value = $("#tabTransHab tbody").children(':eq(' + row + ')').children(':eq(3)').text().substring(5, 9);
        otraCuentaControl.value = $("#tabTransHab tbody").children(':eq(' + row + ')').children(':eq(3)').text().substring(10, 12);
        otraCuentaCuenta.value = $("#tabTransHab tbody").children(':eq(' + row + ')').children(':eq(3)').text().substring(13, 21);
    }
    ;

    $(document).ready(function () {
        $('#txtImporte').change(function () {
            setValoresInResumen();
        });


        $('#txtImporte').autoNumeric({
            aSep:'.',
            aDec:','
        });


        $('#wizard').smartWizard({
            transitionEffect:'slideleft',
            onLeaveStep:leaveAStepCallback,
            onFinish:onFinishCallback,
            enableFinishButton:true,
            labelNext:'<?= lang('siguiente') ?>', // label for Next button
            labelPrevious:'<?= lang('anterior') ?>', // label for Previous button
            labelFinish:'<?= lang('finalizar') ?>'  // label for Finish button
        });

        function leaveAStepCallback(obj) {
            var step_num = obj.attr('rel');
            return validateSteps(step_num);
        }

        function onFinishCallback() {
            if (validateAllSteps()) {
                $('#txtImporte').change();
                $('#trans').submit();
            }
        }

        $('#usuario').dataTable({
            "oLanguage":{
                "sSearch":"Buscar",
                "sLengthMenu":"Mostrando _MENU_ registros por pagina.",
                "sZeroRecords":"Sin resultados",
                "sInfo":"Mostrando _START_ a _END_ de _TOTAL_ registros.",
                "sInfoEmpty":"Mostrando 0 a 0 de 0 registros."
            },
            "bJQueryUI":true
        });
        $('#buscarCuentaDestino').click(function () {
            $('#dialogoCuentaDestino').dialog({
                modal:true,
                height:400,
                width:700,
                resizable:false,
                buttons:[
                    {
                        text:"Ok",
                        click:function () {
                            $(this).dialog("close");
                            var usuario = $("input[name='seleccionado']:checked").val().split("#");
                            $('#uCuenta').val(usuario[1]);
                            $('#uCuentaId').val(usuario[0]);
                        }
                    }
                ]
            });
        });
    });

    function validateSteps(step) {
        var isStepValid = true;
        // validate step 1
        if (step == 1) {
            if (validateStep1() == false) {
                isStepValid = false;
                $('#wizard').smartWizard('showMessage', '<?= lang('errorStep1') ?>');
                $('#wizard').smartWizard('setError', {
                    stepnum:step,
                    iserror:true
                });
            } else {

                $('#wizard').smartWizard('setError', {
                    stepnum:step,
                    iserror:false
                });
            }
        }
        if (step == 2) {
            if (validateStep2() == false) {
                isStepValid = false;
                $('#wizard').smartWizard('showMessage', '<?= lang('errorStep2') ?>');
                $('#wizard').smartWizard('setError', {
                    stepnum:step,
                    iserror:true
                });
            } else {
                $('#wizard').smartWizard('setError', {
                    stepnum:step,
                    iserror:false
                });
            }
        }
        // validate step3
        if (step == 3) {
            if (validateStep3() == false) {
                isStepValid = false;
                $('#wizard').smartWizard('showMessage', '<?= lang('errorStep3') ?>');
                $('#wizard').smartWizard('setError', {
                    stepnum:step,
                    iserror:true
                });
            } else {
                $('#wizard').smartWizard('setError', {
                    stepnum:step,
                    iserror:false
                });
            }
        }

        return isStepValid;
    }
</script>